$threshold-marker--handle-height: 18px;
$threshold-marker--handle-width: 30px;
$threshold-marker--caret-width: 12px;

@mixin threshold-marker--color($color, $color-varient) {
  background-color: $color;

  &.threshold-marker--handle {
    background: linear-gradient(115deg, $color 0%, $color 35%, $color-varient 100%);

    &:before {
      border-right: $threshold-marker--caret-width solid $color;
    }
  }
}

.threshold-markers {
  width: 100%;
  height: 100%;
}

.threshold-marker--crit {
  @include threshold-marker--color($c-fire, $c-curacao);
}

.threshold-marker--warn {
  @include threshold-marker--color($c-tiger, $c-pineapple);
}

.threshold-marker--ok {
  @include threshold-marker--color($c-rainforest, $c-honeydew);
}

.threshold-marker--info {
  @include threshold-marker--color($c-pool, $c-laser);
}

.threshold-marker--unknown {
  @include threshold-marker--color($c-amethyst, $c-amethyst);
}

.threshold-marker--area {
  position: absolute;
  width: 100%;
  opacity: 0.07;
}

.threshold-marker--line {
  position: absolute;
  width: 100%;
  height: 1px;
}

.threshold-marker--handle {
  position: absolute;
  right: 1px - $threshold-marker--handle-width;
  width: $threshold-marker--handle-width - $threshold-marker--caret-width;
  height: $threshold-marker--handle-height;
  border-radius: 0 $radius-small $radius-small 0;
  transform: translateY(-50%);
  cursor: grab;

  &:active {
    cursor: grabbing;
  }

  &:before {
    content: "";
    border-top: ($threshold-marker--handle-height / 2) solid transparent;
    border-bottom: ($threshold-marker--handle-height / 2) solid transparent;
    display: block;
    left: 0 - $threshold-marker--caret-width;
    position: absolute;
  }
}
